<template>
    <div>
     <div class="box">
     <h1>欢迎来到心食谱</h1>
     <h2>一起学做菜</h2>
     </div>
     <div class="Login">
        <button class="bt1" @click="$router.push('/login')">登录</button>
        <button @click="$router.push('/register')">注册</button>
     </div>

     <van-cell title="叫上好友一起来学习吧" @click="showShare = true" />
     <van-share-sheet
     v-model="showShare"
     title="点击下方就可分享哦"
     :options="options"
     @select="onSelect"
     />
    </div>
</template>

<script>
    export default {
    data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
    }
</script>

<style lang="scss" scoped>
 .box{
     padding: 10vw;
 }
 .Login{
     margin-top: 20vh;
     padding:0 13vw;
     button{
         width: 100%;
         height: 7vh;
         margin-bottom: 3vh;
         border-radius: 3.5vh;
         border: 0px;
     }
     .bt1{
         background-image: linear-gradient(to top,#27b1f6 0%,#0aa1ed 100%);
        // background-color: aqua;
     }
 }
</style>